import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';
import Banner from 'COMPONENT/Banner';
import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import {Icon,Button,Modal,Toast, Grid} from 'antd-mobile'
import {Link} from 'react-router'
const prompt = Modal.prompt;

export default class Home extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }
  constructor(props) {
    super(props);
    const data11 = ['电视','冰箱','洗衣机','空调','热水器','床','暖气','宽带','衣柜','天然气'];
		const data12 = ['1','0','0','0','0','0','0','0','0','1'];
		const rentImgData = ['icon_fresh','icon_xiyiji','icon_nuanqi','icon_fresh','icon_xiyiji','icon_nuanqi','icon_fresh','icon_xiyiji','icon_nuanqi','icon_fresh','icon_xiyiji','icon_nuanqi'];
    const data = Array.from(new Array(data11.length)).map((_val, i) => ({
	    icon: './imgs/'+rentImgData[i]+'.png',
	    text: data11[i],
	    has:data12[i],
		}));
    
    this.state={
    		facilities:{
    			name:data,
    			ifHas:data12
    		},
    		data: data,
        collect:false,
        name:localStorage.getItem('name'),
        bannerList:[{'cover':'zz1.png'},{'cover':'banner2.png'}],
        bannerList1:[{'cover':'zz1.png'},{'cover':'banner2.png'},{'cover':'hz1.png'}],
        houseDetail:{
            'money':'￥1390元/月',
            'address':'xx有家.青浦万达茂.3居室-03卧室',
            'area':'11.8m²',
            'houseInfo':'block'
        },
         houseDetail1:{
            'money':'￥4690元/月',
            'address':'xx有家.青浦万达茂.2居室-整租',
            'area':'52m²',
            'houseInfo':'none'
        }
    }

  }

  componentWillMount() {
    //获取token
  }

  goHouseDetail=()=>{
    this.context.router.push({
        pathname: '/RentHouse/HouseDetail'
      })

  }
  confirmInfo=()=>{
    //if(this.state.name=='立即签约'){
    if(true){
        this.context.router.push({
            pathname: '/RentHouse/confirmInfo'
        })
        if(localStorage.getItem('type')=='0'){
            localStorage.setItem('houseMoney',this.state.houseDetail.money)
            localStorage.setItem('houseAddress',this.state.houseDetail.address)
            localStorage.setItem('houseArea',this.state.houseDetail.area)

        }else{
             localStorage.setItem('houseMoney',this.state.houseDetail1.money)
            localStorage.setItem('houseAddress',this.state.houseDetail1.address)
            localStorage.setItem('houseArea',this.state.houseDetail1.area)
        }
    }else{
        this.context.router.push({
            pathname: '/RentHouse/PayMoney'
        })
    }

  }
  collect=(e)=>{
    if(!this.state.collect){
        this.setState({collect: true})
        Toast.info('关注成功')
    }else{
        this.setState({collect: false})
         Toast.info('已取消关注')
    }


  }

  render() {
    let {collect,houseDetail,houseDetail1,bannerList,bannerList1} = this.state;
    let url = collect==true?'./imgs/shoucang-1.png':'./imgs/shoucang.png';
    let houseInfomation= localStorage.getItem('type')=='0'?houseDetail:houseDetail1;
    let banner= bannerList1;
    let _this = this;
    return(
        <div style={{paddingBottom:'1rem'}}>

            <Banner bannerList={banner} />
            
            <div className="houseDetail_title">万景国际  2室1厅 南</div>
            <ul className="houseInfo">
                <li>
                	<div className="info_title">房租</div>
                	<div className="info_val">3500元/月</div>
                </li>
                <li>
                	<div className="info_title">户型</div>
                	<div className="info_val">2室1厅1卫</div>
                </li>
                <li style={{border:'none'}}>
                	<div className="info_title">面积</div>
                	<div className="info_val">80m2</div>
                </li>
            </ul>		
            <div className="advantage">
            	<span className="ad_item">近地铁</span><span className="ad_item">新上</span><span className="ad_item">随时看房</span>
            	
            </div>
						 <ul className="houseDetailInfo" style={{height:'3.2rem'}}>
                <li>
                	<label  className="info_title">发布:</label>
                	<div className="info_val">今天</div>
                </li>
                <li>
                	<label  className="info_title">入住:</label>
                	<div className="info_val">随时入住</div>
                </li>
                <li>
                	<label  className="info_title">租期:</label>
                	<div className="info_val">暂无数据</div>
                </li>
                <li>
                	<label  className="info_title">看房:</label>
                	<div className="info_val">需提前预约</div>
                </li>
                
                <li>
                	<label  className="info_title">楼层:</label>
                	<div className="info_val">高楼层/32层</div>
                </li>
                <li>
                	<label  className="info_title">电梯:</label>
                	<div className="info_val">有</div>
                </li>
                <li>
                	<label  className="info_title">车位:</label>
                	<div className="info_val">暂无数据</div>
                </li>
                
                <li>
                	<label  className="info_title">用水:</label>
                	<div className="info_val">民水</div>
                </li>
                 <li>
                	<label  className="info_title">用电:</label>
                	<div className="info_val">民电</div>
                </li>
                <li>
                	<label  className="info_title">燃气:</label>
                	<div className="info_val">有</div>
                </li>
                
                <li>
                	<label  className="info_title">采暖:</label>
                	<div className="info_val">自采暖</div>
                </li>
                
            </ul>		
						
            <div style={{height:'.2rem'}}></div>
           
            <div className='introHouse'>
                <p  className="houseDetail_title">位置及周边</p>
                <img src="./imgs/map2.png" alt="" />

            </div>
            <div className="text">


	            
	            <div className="houseDetail_title">房源简介</div>
	            <Grid data={this.state.data} hasLine={false} columnNum={5}
	                renderItem={dataItem => (
	                    <div className="am-grid-item-inner-content column-num-5">
	                        <img src={dataItem.icon} alt="" className="am-grid-icon" />
	                        <div className={dataItem.has=='1'?'add_line am-grid-text':'am-grid-text'} style={{color:'#8b95a3'}}>
	                            <span>{dataItem.text}</span>
	                        </div>
	                    </div>
	                )}
	            />
	            <div style={{borderBottom:'1px solid #e1e1e1',paddingBottom:'0.3rem',margin:'0 0.4rem'}}></div>

	            
	            <div className="houseDetail_title">费用详情</div>
	            
	            <div style={{padding: '0.3rem 0.5rem 0.5rem 0.5rem'}}>
	                <div className="table_style">
	                    <div>付款方式</div><div><span>租金</span><span className="color1">(元/月)</span></div><div><span>服务费</span><span className="color1">(元)</span></div><div><span>中介费</span><span className="color1">(元)</span></div><div>押金</div>
	                </div>
	                <div className="table_style">
	                    <div>未知</div><div>3500</div><div>0</div><div className="color1">需咨询</div><div>3500</div>
	                </div>
	                
	            </div>
	        </div>
            <div className='foot'>
                <span className='sc'><img src={url}  onClick={this.collect.bind(this)}/><br/>关注</span>
                <span onClick={() => {
                	_this.context.router.push({
						pathname: '/Reservation',
						query:{
							title:'看房预约'
						}
					})
                }}>看房预约</span>
                <span style={{background:'#108ee9',color:'#fff'}} onClick={this.confirmInfo.bind(this)}>选房预约</span>

            </div>
        </div>
    )
  }

}